<template>
  <view class="top-container">
    <view v-if="topBar.style === 'custom'">
      <view :style="{height: topBar.statusBarHeight+'px'}"></view>
      <view class="status-contents" :style="{height: topBar.navbarHeight+'px'}">
        <image src="../../static/black_back.png" mode="widthFix" v-if="hasBackBtn" class="back"
               @click="onBack()"></image>
        <image src="../../static/black_home.png" v-else mode="widthFix" class="home" @click="toHome"></image>
        <text class="title">{{ title }}</text>
        <view class="btn">
          <image src="../../static/shezhi@2x.png" class="setting" @click="$emit('settingClick')"></image>
        </view>
      </view>
    </view>
    <view class="swiper-tabbar-container" :style="{height: topBar.navbarHeight+'px'}">
      <view class="swiper-tabbar">
        <view :class="['item', mode==='answer'?'selected':'']" @click="changeMode('answer')">
          <text class="text">答题模式</text>
        </view>
        <view :class="['item', mode==='recite'?'selected':'']" @click="changeMode('recite')">
          <text class="text">背题模式</text>
        </view>
      </view>
    </view>

    <!--    <view class="vip-container">-->
    <!--      vip-->
    <!--    </view>-->
  </view>
</template>
<script>
import {mapGetters} from 'vuex'
import questionCache from "@/libs/questionCache";

export default {
  name: 'PracticeNavbar',
  props: ['title', 'storeId'],
  data() {
    return {
      mode: 'answer',
      hasBackBtn: true,
    }
  },
  computed: {
    ...mapGetters(['topBar']),
  },
  created() {
    this.hasBackBtn = this.haveBackBtn()
  },
  methods: {
    changeMode(mode) {
      if (this.mode !== mode) {
        this.mode = mode;
        questionCache.getStore(this.storeId).publish('changeMode', mode)
      }
    },
    haveBackBtn() {
      return getCurrentPages().length > 1
    },
    toHome() {
      uni.reLaunch({url: '/pages/home/home'})
    },
    onBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang='scss'>
.top-container {
  background-color: #fff;
  box-sizing: border-box;

  .status-contents {
    padding: 0 20rpx;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;

    .back {
      width: 36rpx;
      height: 36rpx;
      position: absolute;
      left: 20rpx;
    }
    .home {
      width: 50upx;
      height: 50upx;
    }
    .title {
      margin: 0 auto;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .btn {
    height: 108upx;
    padding: 0 20upx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10rpx;
    color: #999;
    .setting {
      width: 40rpx;
      height: 48rpx;
    }
    &.can {
      color: #1f1f1f;
    }
  }
  .vip-container {
    height: 88rpx;
  }

  .swiper-tabbar-container {
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;

    .swiper-tabbar {
      height: 60rpx;
      border: 1px solid #323334;
      border-radius: 32rpx;
      overflow: hidden;
      flex-direction: row;
      display: flex;

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 30rpx;

        &.selected {
          .text {
            color: #fff;
          }

          background-color: #323334;
          border-radius: 28rpx;
        }
      }
    }
  }
}
</style>
